<template>
    <div class="index-box" >
        <div >
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide firstShuffling">
                        <firstShuffling></firstShuffling>
                    </div>
                    <div class="swiper-slide">
                        <secondShuffling></secondShuffling>
                    </div>
                    <div class="swiper-slide">
                        <div class="animate-box">
                            <animate1></animate1>
                        </div>
                    </div>
                    <div class="swiper-slide slide-box3">
                        <forthShuffling></forthShuffling>
                    </div>
                </div>
                <div class="swiper-pagination">
                </div>
            </div>
        </div>
        <ul class="list">
            <li @mouseover="goList1" @mouseout="toList1" @click="text1" :class="mySwiper.activeIndex==0?'list-active':''">
                <transition name="word5">
                    <span class="word1" v-show="isWord1">
                        首页——
                    </span>
                </transition>
            </li>
            <li @mouseover="goList2" @mouseout="toList2" @click="text2" :class="mySwiper.activeIndex==1?'list-active':''">
                <transition name="word6">
                    <span class="word2"  v-show="isWord2">
                        产品——
                    </span>
                </transition>
            </li>
            <li @mouseover="goList3" @mouseout="toList3" @click="text3" :class="mySwiper.activeIndex==2?'list-active':''">
                <transition name="word7">
                    <span class="word3" v-show="isWord3">
                        新闻中心——
                    </span>
                </transition>
            </li>
            <li @mouseover="goList4" @mouseout="toList4" @click="text4" :class="mySwiper.activeIndex==3?'list-active':''">
                <transition name="word8">
                    <span class="word4" v-show="isWord4">
                    关于我们——
                    </span>
                </transition>
            </li>
        </ul>
    </div>
</template>

<script>
    import Swiper from "swiper";
    import firstShuffling from "./firstShuffling";
    import secondShuffling from "./secondShuffling";
    import animate1 from "./animate";
    import forthShuffling from "./forthShuffling";
    export default {
        name: "bigSwiper",
        data(){
            return{
                isClick: false,
                isClick1: false,
                inter1: "",
                inter2: "",
                mySwiper:"",
                isWord1:false,
                isWord2:false,
                isWord3:false,
                isWord4:false,
            }
        },
        components:{
            firstShuffling,
            secondShuffling,
            animate1,
            forthShuffling
        },
        created() {
            // this.show();
            // console.log(this.flag)
        },
        methods:{
            text1(){
                // console.log(this.mySwiper.activeIndex)
                this.mySwiper.slideTo(0)
            },
            text2(){
                // console.log(this.mySwiper.activeIndex)
                this.mySwiper.slideTo(1)
            },
            text3(){
                // console.log(this.mySwiper.activeIndex)
                this.mySwiper.slideTo(2)
            },
            text4(){
                // console.log(this.mySwiper.activeIndex)
                this.mySwiper.slideTo(3)
            },
            goList1(){
                this.isWord1=true
            },
            toList1(){
                this.isWord1=false
            },
            goList2(){
                this.isWord2=true
            },
            toList2(){
                this.isWord2=false
            },
            goList3(){
                this.isWord3=true
            },
            toList3(){
                this.isWord3=false
            },
            goList4(){
                this.isWord4=true
            },
            toList4(){
                this.isWord4=false
            },
            isShowAnimate1(){
                this.show1=true
                // console.log(11111111)
            },
            // show() {
            //     this.inter1 = setInterval(() => {
            //         this.isClick = true
            //     }, 1000)
            //     this.inter2 = setInterval(() => {
            //         this.isClick1 = true
            //     }, 3000)
            // }
        },
        mounted() {
            let that=this
            this.mySwiper= new Swiper(".mySwiper", {
                direction: "vertical",
                slidesPerView: 1,
                spaceBetween: 0,
                mousewheel: true,
                speed:1200,
                on:{
                    slideChange: function(){
                        // console.log(this)
                        // alert('改变了，activeIndex为'+this.activeIndex);
                        // console.log(this)
                            that.$store.commit('modifyAnimate', this.activeIndex)
                    },
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
            that.$store.commit('modifyImg', this.mySwiper)
        }
    }
</script>

<style scoped lang="less">
    .swiper {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .index-box{
        height: 100%;
        width: 100%;
        position: fixed;
        /*overflow: hidden;*/
    }
    .firstShuffling{
        overflow: hidden;

    }
    .el-carousel.el-carousel--horizontal{
        height: 100%;
    }
    /deep/.swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        background: white;
        z-index: 1000;
    }
    /deep/.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{
        margin: 29px 0;
    }
    /deep/.index-box>div{
        height: 100vh;
    }
    /deep/.swiper-container-vertical > .swiper-pagination-bullets{
        opacity: 0;
    }
    .list{
        position: fixed;
        right: 15px;
        bottom: 260px;
        li{
            position: relative;
            width: 15px;
            height: 15px;
            background-color: rgba(255,255,255,0.5);
            margin-bottom: 50px;
            border-radius: 50%;
            color: #007aff;
        }
    }
    .word1,.word2,.word3,.word4{
        color: #007aff;
        font-size: 16px;
        z-index: 100000;
    }
    .word1{
        position: absolute;
        left: -69px;
        top: -6px;
    }
    .word2{
        position: absolute;
        left: -69px;
        top: -6px;
    }
    .word3{
        position: absolute;
        left: -100px;
        top: -4px;
    }
    .word4{
        position: absolute;
        left: -100px;
        top: -4px;
    }
    .word5-enter,.word6-enter,.word7-enter,.word8-enter{
        transform: translateX(-20px);
    }
    .word5-enter-active,.word6-enter-active,.word7-enter-active,.word8-enter-active{
       transition: all 1s linear;
    }
    .word5-leave-to,.word6-leave-to,.word7-leave-to,.word8-leave-to{
        transform: translateX(-20px);
    }
    .word5-leave-active,.word6-leave-active,.word7-leave-active,.word8-leave-active{
        transition: all 1s linear;
    }
.list-active{
    background-color: #007aff!important;
}
</style>